<!DOCTYPE html>
<html>
<head lang="en">
    <meta http-equiv="content-type" content="text/html;charset=utf-8" charset="UTF-8">
    <title>乐器详情</title>
    <link href="font/css/font-awesome.css" rel="stylesheet" type="text/css">
    <link href="css/top-navigation.css" rel="stylesheet" type="text/css">
    <link href="css/footer.css" rel="stylesheet" type="text/css">


    <style type="text/css">

        a{
            text-decoration: none;
        }

        body{
            background-color: #EEE;
        }

        #main-box{
            width:1240px;
            margin:50px auto;
            overflow: hidden;
        }


        #main-box .main-right{
            width: 240px;
            min-height: 700px;
            float: right;
            background-color: #ffffff;
            box-shadow: 0 0 5px #888;
            -moz-box-shadow:  0 0 5px #888;
            -webkit-box-shadow:  0 0 5px #888;
            -ms-box-shadow:0 0 5px #888;
        }

        .rank-title{
            height:40px;
            line-height: 40px;
            margin:20px;
            font-size: 16px;
        }

        #rank-list{
            margin:20px;
            list-style: none;
        }

        #rank-list li{
            margin:10px 0;
        }

        #rank-list li a{
            display: block;
            height:40px;
            line-height: 40px;
        }

        #rank-list li a:hover{
            color: #C72812;
            font-size: 20px;
        }

        #rank-list li a:hover i{
            font-size: 20px;
        }

        #rank-list li a .rank{
            display: inline-block;
            width:25px;
            height:40px;
            line-height: 40px;
            text-align: left;
        }

        #rank-list li a img{
            width:40px;
            height:40px;
            vertical-align: middle;
            padding-right: 10px;
            border-radius: 50%;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            -ms-border-radius:50%;
        }

        #rank-list li a i{
            float: right;
            height:40px;
            line-height: 40px;
            padding:0 10px;
            font-size: 16px;
        }

        #rank-list li a i.fa-arrow-up{
            color: #468012;
        }

        #rank-list li a i.fa-arrow-down{
            color: #ee8d35;
        }

        #load-more{
            text-align: center;
            height:40px;
            line-height: 40px;
            border-top:2px solid #ddd;
            padding-top:20px;
            margin:0 20px;
        }

        #load-more a{
            display: block;
            height:40px;
            line-height: 40px;
        }

        #load-more a:hover{
            background-color: #C72812;
            color: #ffffff;
        }


        #main-box .main-left{
            float: right;
            width:980px;
            border-top:5px solid #C72812;
            margin-right: 20px;;
        }
        

        #detail-panel{
            background-color: #fff;
            box-shadow: 0 0 5px #888;
            -moz-box-shadow:  0 0 5px #888;
            -webkit-box-shadow:  0 0 5px #888;
        }

        .result-item{
            padding:20px 20px;
        }

        .result-item .result-item-header{
            height: 40px;
            line-height: 40px;
            border-bottom: 2px solid #ddd;
            padding-bottom: 10px;
            overflow: hidden;
        }

        .result-item .result-item-header h4{
            float: left;
            height: 37px;
            line-height: 37px;
            border-bottom: 5px solid #ee8d35;
            padding:0 40px 10px 20px;
            font-size: 20px;
        }

        .result-item .result-item-header .item-visit-times{
            float: right;
            height: 42px;
            line-height: 42px;
            padding:0 20px;
        }

        .result-item .result-item-header .item-visit-times i{
            width:20px;
            height:42px;
            line-height: 42px;
            padding:0 3px;
            color: #ee8d35;
            font-size: 20px;
        }

        .result-item .result-item-content p{
            text-indent: 2em;
            padding-top:15px;
        }

        .result-item .result-item-content dl{
            height:40px;
            line-height: 40px;
            margin:10px 25px 0 25px;
        }

        .result-item .result-item-content dl dt{
            height:40px;
            line-height: 40px;
            float: left;
            color:#000;
        }

        .result-item .result-item-content dl dd{
            height:40px;
            line-height: 40px;
            float: left;
        }

        .result-item .result-item-content dl dd a{
            height:40px;
            line-height: 40px;
            padding:0 5px;
        }

        .result-item .result-item-content dl dd a:hover{
            color: #ee8d35;
        }


        .result-item-content{
            position: relative;
        }

        #image-gallery{
            height:220px;
            line-height: 220px;
            width:698px;
            margin:20px auto 0;
            list-style: none;
            /*overflow: hidden;*/
        }

        #image-gallery .image-box{
            float: left;
            width:206px;
            height:200px;
            line-height: 200px;
            padding:0 20px 20px 0;
        }

        #image-gallery .image-border-box{
            position: relative;
            height:194px;
            width:200px;
            border: 3px solid #ccc;
            border-radius: 5px;
            -webkit-border-radius: 5px;
            -moz-border-radius:  5px;
            -ms-border-radius: 5px;
            box-shadow: 0 0 10px #ccc;
            -moz-box-shadow:  0 0 10px #ccc;
            -webkit-box-shadow:  0 0 10px #ccc;
        }

        #image-gallery .image-border-box:hover{
            border: 3px solid #C72812;
            cursor: pointer;
        }

        #image-gallery .image-border-box:hover .image-title{
            color: #C72812;
        }

        #image-gallery .image-border-box:hover .image-description i{
            color: #C72812;
        }

        #image-gallery .image-border-box .image{
            display: block;
            max-width:200px;
            max-height:194px;
            margin:0 auto;
            overflow: hidden;
        }

        #image-gallery .image-border-box .image-description{
            position: absolute;
            left:0;
            bottom: 0;
            right:0;
            height:60px;
            padding:0 20px;
            background-color: #EEE;
            opacity: 0.8;
        }

        #image-gallery .image-description .image-title{
            float: left;
            height:60px;
            line-height: 60px;
            color:#333;
            font-size:13px;
        }

        #image-gallery .image-description i{
            float: right;
            height:60px;
            line-height: 60px;
            color:#333;
            font-size:20px;
        }


        .left-arrow{
            display: none;
            height:200px;
            width:50px;
            line-height: 200px;;
            position: absolute;
            top:0;
            left: 20px;
            text-align: center;
            cursor: pointer;
        }

        .right-arrow{
            display: none;
            height:200px;
            width:50px;
            line-height: 200px;;
            position: absolute;
            top:0;
            right: 20px;
            text-align: center;
            cursor: pointer;
        }

        .left-arrow i,.right-arrow i{
            font-size:20px;
        }

        .left-arrow:hover,.right-arrow:hover{
            background-color: #ee8d35;
        }

        .left-arrow:hover i,.right-arrow:hover i{
            color: #fff;
        }


        .material-table{
            display: block;
            width:100%;
            margin:10px 0;
        }

        .material-table thead{
            display: block;
            width:100%;
            height:35px;
            background-color: #FCF2F3;
            font-size:18px;
            font-weight: 600;
        }

        .material-table tbody{
            display: block;
            width:100%;
            background-color: #FDFBFC;
        }

        .material-table tr{
            display: block;
            width:100%;
            height:35px;
            overflow: hidden;
        }

        .material-table th,.material-table td{
            display: block;
            float: left;
            width:270px;
            height:35px;
            line-height: 35px;
            text-align: left;
            padding-left: 40px;
        }

        .material-table thead th{
            position: relative;
        }

        .material-table i{
            position: absolute;
            height: 35px;
            line-height: 35px;
            top:0;
            left:15px;
            color:#C54834;
        }


        #image-browser{
            display: none;
            position: fixed;
            top:0;
            bottom: 0;
            width: 100%;
            background-color: rgba(144,144,144,0.5);
            /*opacity: 0.5;*/
            /*filter: alpha(opacity=50);*/
        }

        #main-window{
            position: fixed;
            height: 600px;
            top:50%;
            left:50%;
            transform: translate(-50%,-50%);
            background-color: #ffffff;
        }


    </style>

    <script type="text/javascript" src="js/jquery-1.11.1.js"></script>

    <script type="text/javascript" src="js/app/header.js"></script>

    <script type="text/javascript" src="js/app/footer.js"></script>

    <script type="text/javascript">
        $(document).ready(function(){

            var imageBoxes = $(" #image-gallery .image-box");
            imageBoxes.each(function(index,val){
                var $this = $(this);
                var src = $this.find("img").attr("src");
                 $this.on("click",function(e){
                    $("#image-browser").show();
                    $("#main-window").attr("src",src).focus();
                })
            });


            $("#image-browser").on("click",function(e){
                if($(e.target).get(0) != $("#main-window").get(0))
                    $(this).hide();
            });

            var imagesLen = imageBoxes.length;
            if(imagesLen > 3){
                var $right = $("#right-arrow");
                var $left = $("#left-arrow");
                var currentMin = 0;
                var currentMax = 2;
                $right.show();
                imageBoxes.each(function(index,val){
                    var $this = $(this);
                    if(index > 2){
                        $this.hide();
                    }
                });

                $right.on("click",function(e){
                    imageBoxes.eq(currentMin++).hide();
                    if(currentMin > 0){
                        $left.show();
                    }
                    imageBoxes.eq(++currentMax).show();
                    if(currentMax >= imagesLen-1){
                        $right.hide();
                    }
                });

                $left.on("click",function(e){
                    imageBoxes.eq(currentMax--).hide();
                    if(currentMax < imagesLen){
                        $right.show();
                    }
                    imageBoxes.eq(--currentMin).show();
                    if(currentMin == 0){
                        $left.hide();
                    }
                })
            }


        });
    </script>

    <!--<script src="https://use.fontawesome.com/1829b45e75.js"></script>-->

</head>
<body>

<div id="top-navigation" class="top-navigation">
    <div id="top-main" class="top-main">

        <div class="site-title">
            乐器数据库
        </div>

        <div class="func-box">
            <a href="#" class="language">EN</a>
            <a href="#" class="language">中文</a>
            <a href="#">关于我们</a>
            <div id="login-model">
                <a id="login-link" href="#">登录
                    <i class="fa fa-caret-down" aria-hidden="true"></i>
                </a>
                <div class="login-model">
                    <div class="line header">
                        <i class="fa fa-user" aria-hidden="true"></i>
                        会员登录
                    </div>
                    <form>
                        <div class="line input">
                            <input type="text" placeholder="用户名">
                        </div>

                        <div class="line input">
                            <input type="password" placeholder="密码">
                        </div>

                        <div class="line func">
                            <div>
                                <input id="remember-me" type="checkbox">
                                <label for="remember-me">记住我</label>
                            </div>

                            <a href="#">忘记密码？</a>
                        </div>

                        <div class="line btn-login-reg">
                            <input class="btn-login" type="submit" value="登录">
                            <a class="btn-register" href="regist.html">注册</a>
                        </div>

                    </form>
                </div>

            </div>
            <a id="btn-register" href="#"> <i class="fa fa-user" aria-hidden="true"></i>立即注册</a>
        </div>

        <div class="search-box">
            <form id="search-form" class="search-from" target="_blank" method="get" action="#">
                <button id="search-btn" type="submit"><i class="fa fa-search" aria-hidden="true"></i></button>

                <div class="search-panel">
                    <input id="search-input" type="text" placeholder="搜索乐器关键字">
                </div>
            </form>
        </div>
    </div>
</div>

<div class="main-box" id="main-box">

    <div class="main-right">
        <div class="rank-title">
            最近30天访问量排名
        </div>
        <ol id="rank-list">
            <li>
                <a href="#">
                    <span class="rank">1.</span>
                    <img src="img/rank/1.jpg">
                    竹笛
                    <i class="fa fa-arrow-down" aria-hidden="true"></i>
                </a>
            </li>

            <li>
                <a href="#">
                    <span class="rank">2.</span>
                    <img src="img/rank/2.jpg">
                    琵琶
                    <i class="fa fa-arrow-up" aria-href="true"></i>
                </a>
            </li>

            <li>
                <a href="#">
                    <span class="rank">3.</span>
                    <img src="img/rank/3.jpg">
                    笙
                    <i class="fa fa-arrow-down" aria-hidden="true"></i>
                </a>
            </li>

            <li>
                <a href="#">
                    <span class="rank">4.</span>
                    <img src="img/rank/4.jpg">
                    葫芦丝
                    <i class="fa fa-arrow-up" aria-hidden="true"></i>
                </a>
            </li>

            <li>
                <a href="#">
                    <span class="rank">5.</span>
                    <img src="img/rank/5.jpg">
                    阮
                    <i class="fa fa-arrow-down" aria-hidden="true"></i>
                </a>
            </li>

            <li>
                <a href="#">
                    <span class="rank">6.</span>
                    <img src="img/rank/6.jpg">
                    唢呐
                    <i class="fa fa-arrow-up" aria-hidden="true"></i>
                </a>
            </li>

            <li>
                <a href="#">
                    <span class="rank">7.</span>
                    <img src="img/rank/7.jpg">
                    二胡
                    <i class="fa fa-arrow-down" aria-hidden="true"></i>
                </a>
            </li>

            <li>
                <a href="#">
                    <span class="rank">8.</span>
                    <img src="img/rank/8.jpg">
                    大鼓
                    <i class="fa fa-arrow-up" aria-hidden="true"></i>
                </a>
            </li>

            <li>
                <a href="#">
                    <span class="rank">9.</span>
                    <img src="img/rank/9.jpg">
                    埙
                    <i class="fa fa-arrow-down" aria-hidden="true"></i>
                </a>
            </li>

            <li>
                <a href="#">
                    <span class="rank">10.</span>
                    <img src="img/rank/10.jpg">
                    古筝
                    <i class="fa fa-arrow-up" aria-hidden="true"></i>
                </a>
            </li>
        </ol>

        <div id="load-more">
            <a href="#">查看更多</a>
        </div>
    </div>

    <div class="main-left">
        <div id="detail-panel">

            <div class="result-item">
                <div class="result-item-header">
                    <h4>琵琶</h4>
                    <div class="item-visit-times">
                        <i class="fa fa-user" aria-hidden="true"></i>
                        2000
                    </div>
                </div>
                <div class="result-item-content">
                    <dl>
                        <dt>
                            八音分类：
                        </dt>
                        <dd>
                            <a href="#">木</a>
                        </dd>
                    </dl>

                    <dl>
                        <dt>
                            霍萨分类：
                        </dt>
                        <dd>
                            <a href="#">弹拨乐器</a>/<a href="">擦弦乐器</a>
                        </dd>
                    </dl>

                    <dl>
                        <dt>
                            演奏方式：
                        </dt>
                        <dd>
                            <a href="#">弹拨乐器</a>
                        </dd>
                    </dl>

                    <dl>
                        <dt>
                            地域分类：
                        </dt>
                        <dd>
                            <a href="#">北京</a>
                        </dd>
                        <dd>
                            <a href="#">上海</a>
                        </dd>
                        <dd>
                            <a href="#">广州</a>
                        </dd>
                        <dd>
                            <a href="#">深圳</a>

                        </dd>
                    </dl>

                    <dl>
                        <dt>
                            民族分类：
                        </dt>
                        <dd>
                            <a href="#">汉族</a>
                        </dd>
                        <dd>
                            <a href="#">回族</a>
                        </dd>
                    </dl>
                </div>
            </div>

            <div class="result-item">
                <div class="result-item-header">
                    <h4>详细介绍</h4>
                </div>
                <div class="result-item-content">
                    <p>
                        琵琶，是弹拨乐器首座， 拨弦类弦鸣乐器。木制，音箱呈半梨形，上装四弦，原先是用丝线，现多用钢丝、钢绳、尼龙制成。颈与面板上设用以确定音位的“相”和“品”。演奏时竖抱，左手按弦，右手五指弹奏，是可独奏、伴奏、重奏、合奏的重要民族乐器。琵琶，是东亚传统弹拨乐器，已有两千多年的历史。最早被称为“琵琶”的乐器大约在中国秦朝出现。“琵琶”二字中的“珏”意为“二玉相碰，发出悦耳碰击声”，表示这是一种以弹碰琴弦的方式发声的乐器。其名“琵”、“琶”是根据演奏这些乐器的右手技法而来的。也就是说琵和琶原是两种弹奏手法的名称，琵是右手向前弹，琶是右手向后挑。在唐朝以前，琵琶也是汉语里对所有鲁特琴族（又称琉特属）弹拨乐器的总称。中国琵琶更传到东亚其他地区，发展成现时的日本琵琶、朝鲜琵琶和越南琵琶。
                    </p>
                </div>
            </div>

            <div class="result-item">
                <div class="result-item-header">
                    <h4>图片预览</h4>
                </div>
                <div class="result-item-content">
                    <a id="left-arrow" class="left-arrow">
                        <i class="fa fa-chevron-left" aria-hidden="true"></i>
                    </a>

                    <ul id="image-gallery">

                        <li class="image-box">
                            <div class="image-border-box">
                                <img class="image" src="img/detail/1.jpg">
                                <div class="image-description">
                                    <div class="image-title">琵琶预览图片1</div>
                                    <i class="fa fa-angle-down" aria-hidden="true"></i>
                                </div>
                            </div>
                        </li>

                        <li class="image-box">
                            <div class="image-border-box">
                                <img class="image" src="img/detail/2.jpg">
                                <div class="image-description">
                                    <div class="image-title">琵琶预览图片2</div>
                                    <i class="fa fa-angle-down" aria-hidden="true"></i>
                                </div>
                            </div>
                        </li>

                        <li class="image-box">
                            <div class="image-border-box">
                                <img class="image" src="img/detail/3.jpg">
                                <div class="image-description">
                                    <div class="image-title">琵琶预览图片3</div>
                                    <i class="fa fa-angle-down" aria-hidden="true"></i>
                                </div>
                            </div>
                        </li>

                        <li class="image-box">
                            <div class="image-border-box">
                                <img class="image" src="img/detail/4.jpg">
                                <div class="image-description">
                                    <div class="image-title">琵琶预览图片4</div>
                                    <i class="fa fa-angle-down" aria-hidden="true"></i>
                                </div>
                            </div>
                        </li>

                        <li class="image-box">
                            <div class="image-border-box">
                                <img class="image" src="img/detail/5.jpg">
                                <div class="image-description">
                                    <div class="image-title">琵琶预览图片5</div>
                                    <i class="fa fa-angle-down" aria-hidden="true"></i>
                                </div>
                            </div>
                        </li>

                    </ul>

                    <a id="right-arrow" class="right-arrow">
                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
                    </a>
                </div>
            </div>

            <div class="result-item">
                <div class="result-item-header">
                    <h4>相关资料</h4>
                </div>
                <div class="result-item-content">
                    <table class="material-table" id="image-material">
                        <thead>
                          <tr>
                              <th>
                                  <i class="fa fa-file-image-o" aria-hidden="true"></i>
                                  图片资料
                              </th>
                              <th>时间</th>
                              <th>教授</th>
                          </tr>
                        </thead>
                        <tbody>
                          <tr>
                              <td>琵琶制作图纸1.jpg</td>
                              <td>2011-11-11</td>
                              <td>未知</td>
                          </tr>

                          <tr>
                              <td>琵琶制作图纸1.jpg</td>
                              <td>2013-11-11</td>
                              <td>未知</td>
                          </tr>
                        </tbody>
                    </table>

                    <table class="material-table" id="music-material">
                        <thead>
                        <tr>
                            <th>
                                <i class="fa fa-file-audio-o" aria-hidden="true"></i>
                                音乐资料
                            </th>
                            <th>时间</th>
                            <th>教授</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>乐曲类-琵琶演奏乐曲A.mp3</td>
                            <td>2011-11-11</td>
                            <td>未知</td>
                        </tr>

                        <tr>
                            <td>乐曲类-琵琶演奏乐曲A.mp3</td>
                            <td>2013-11-11</td>
                            <td>未知</td>
                        </tr>
                        </tbody>
                    </table>

                    <table class="material-table" id="video-material">
                        <thead>
                        <tr>
                            <th>
                                <i class="fa fa-file-video-o" aria-hidden="true"></i>
                                视频资料
                            </th>
                            <th>时间</th>
                            <th>教授</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>琵琶频谱分析A.mp4</td>
                            <td>2011-11-11</td>
                            <td>未知</td>
                        </tr>

                        <tr>
                            <td>琵琶频谱分析B.mp4</td>
                            <td>2013-11-11</td>
                            <td>未知</td>
                        </tr>
                        </tbody>
                    </table>

                    <table class="material-table" id="analysis-material">
                        <thead>
                        <tr>
                            <th><i class="fa fa-file-text" aria-hidden="true"></i>
                                分析资料
                            </th>
                            <th>时间</th>
                            <th>教授</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>琵琶频谱分析A</td>
                            <td>2011-11-11</td>
                            <td>未知</td>
                        </tr>

                        <tr>
                            <td>琵琶频谱分析B</td>
                            <td>2013-11-11</td>
                            <td>未知</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>

        </div>
    </div>

</div>

<div>

</div>

<div id="image-browser">
    <img id="main-window" src="img/detail/1.jpg">
</div>

<div class="footer">
    <div class="line">

        <span>
            2016 © XX机构版权所有
        </span>

        <span>
            京备1234567
        </span>

        <span>
            XX公司技术支持
        </span>

        <a id="admin-link" href="#">
            管理后台
        </a>
    </div>
</div>

</body>
</html>